<template>
    <div>
      <table border="1">
        <tr>
          <th>商品名</th>
          <th>描述</th>
          <th>价格</th>
        </tr>
        <tr v-for="a in all">
          <td>{{ a.name }}</td>
          <td>{{ a.desc }}</td>
          <td>{{ a.price }}</td>
        </tr>
      </table>

                <!--使用heyui分页-->
      <div>

            <Pagination v-model="pagination" layout="pager,jumper" @change="get_goodslist" small></Pagination>
      </div>
      <div>
        						<!--检索功能-->

						<Search @search="search" v-model="text" ></Search>

      </div>
      <div>

				<Button @click="get_goods_self(page,'price','')">按价格排序</Button>
				<Button @click="get_goods_self(page,'crerta_time','')">按创建时间排序</Button>
				</div>
    </div>
</template>

<script>
    export default {
        name: "allgoods",
      data(){
          return{
            all:[],
            //检索关键字
            text:'',
            //分页器变量
            pagination:{
              page:1,
              size:2,
              total:2
            },
            //分页排序
          order:'',
          coloum:'',


          }
      },
      mounted:function(){

	  this.get_goodslist();



    },

      methods:{
        //价格排序
	  price_order(coloum){
		  this.coloum=coloum;
		  this.get_goods_self(this.page)

	  },


        //检索方法
			search:function(){

				//获取输入的关键词
				console.log(this.text);

				//进行跳转操作 带着检索关键字跳转
				this.$router.push({path:'/jian',query:{text:this.text}});

			},

        //获取商品
     get_goodslist:function(){

       //请求后台接口
		  this.axios.get('http://127.0.0.1:8000/allgoods/',{params:{page:this.pagination.page,size:this.pagination.size}}).then((result)=>{



				this.all = result.data.data;
				this.pagination.total = result.data.total;


			});

	 },


        },



    }
</script>

<style scoped>

</style>
